<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1, user-scalable=no" />
    <title>YSH-后端管理</title>
    <link rel="stylesheet" href="/live2d/css/live2d.css" />
    <link rel="stylesheet" href="/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="/layuiAdmin/dist/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/base.css">
    <!--    <link rel="stylesheet" href="/layuiAdmin/src/layuiadmin/style/admin.css" media="all">-->
    <script src="/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            border: none;
            background: url('/images/background-image.png') no-repeat;
            background-size: 100% 100%;
            overflow: hidden;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        body:active {
            cursor: url('/images/ico/gb_2.ico') 16 16, auto;
        }

        .absolute {
            position: absolute;
            font-size: 10px;
            border: 1px solid #fff;
            border-radius: 50%;
            width: 15px;
            height: 15px;
            line-height: 15px;
            text-align: center;
            display: none;
            color: #fff;
        }

        #one,
        #two,
        #three,
        #four,
        #five {
            nimation: wzanima 5s linear infinite;
            z-index: 99999999
        }

        #wzbg {
            display: none;
            animation: anima 5s linear infinite;
            position: absolute;
            width: 100px;
            height: 100px;
            z-index: -3
        }

        @keyframes wzanima {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(-720deg);
            }
        }

        @keyframes anima {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes lodding {
            0% {
                top: -100px;
            }

            100% {
                top: 50%;
            }
        }

        canvas {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: -1;
        }

        form {
            padding: 43px;
            color: #D2D2D2;
            width: 371px;
            box-sizing: border-box;
        }

        form .div {
            text-align: center;
            color: #333;
        }

        form input {
            position: relative;
            z-index: 99999;
            /* height: 34px;
            line-height: 34px; */
            /* padding: 0; */
            margin: 0;
            top: -2px;
            width: 100%;
            background: rgba(255, 255, 255, 0);
            outline: none;
            /* color: #fff; */
        }

        #bigdiv {
            background: rgba(255, 255, 255, 1);
            box-shadow: 0 -15px 50px rgba(0, 0, 0, 0.1);
            border-radius: 7px;
            display: flex;
            overflow: hidden;
        }

        .title {
            font-size: 24px;
            font-weight: bold;
        }

        .fb {
            width: 30px;
            font-weight: bold;
            line-height: 40px;
            text-align: center;
            display: inline-block;
        }

        .intdiv {
            /* background: rgba(21, 193, 237, 0.6); */
            line-height: 40px;
            margin-top: 10px;
            border-radius: 5px;
        }

        #login {
            /* background: rgba(21, 193, 237, 1); */
            line-height: 40px;
            margin-top: 10px;
            border-radius: 5px;
            text-align: center;
        }

        #login div {
            position: relative;
            z-index: 99;
        }

        #lodding {
            background: #1276ED;
            text-align: center;
            position: absolute;
            left: 50%;
            top: -100px;
            margin: -65px 0 0 -65px;
            width: 130px;
            height: 130px;
            z-index: 9999;
            border-radius: 20px;
        }

        .drag-out {
            display: inline-block;
            font-size: 14px;
            color: #333;
            width: 100%;
            margin: 10px 5px 0 0;
            position: relative;
            height: 40px;
            line-height: 40px;
            background-color: rgba(0, 93, 173, 1);
            text-align: center;
            user-select: none;
            margin-bottom: 66px;
        }

        .drag-out span {
            position: relative;
            color: #fff;

        }

        .drag-area {
            border-radius: 5px;
            position: absolute;
            height: 38px;
            border: 1px solid #CCCCCC;
            width: 48px;
            top: 0;
            left: 0;
            background-color: #eee;
            cursor: move;
            line-height: 38px;
            user-select: none;
        }

        .drag-area i {
            font-size: 20px;
            line-height: 38px;
            color: rgba(0, 93, 173, 1);
            ;
        }

        .drag-code {
            position: absolute;
            width: 0;
            height: 40px;
            left: 0;
            top: 0;
            background-color: rgba(0, 93, 173, 1);
        }

        .div.desc {
            margin-bottom: 34px;
        }

        .left {
            width: 430px;
            box-sizing: border-box;
            background: url('/images/login-box-img.png') no-repeat;
            background-size: cover;
            padding: 0 41px;
            box-sizing: border-box;
            font-family: Microsoft YaHei;
            color: #FFFFFF;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .left p {
            font-size: 22px;
            font-weight: bold;

        }

        .left span {
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #FFFFFF;
        }
    </style>
</head>

<body>
    <!-- <div id="lodding">
    <i class="fa fa-spinner fa-spin fa-4x fa-pulse" style="color:#fff;margin-top: 20px;" aria-hidden="true"></i>
    <div style="color:#fff;margin-top: 5px;">验证中</div>
</div> -->
    <div id="bigdiv">
        <div class="left">
            <p>欢迎登录系统</p>
            <span>企业自己的平台</span>
        </div>
        <form id="form" action="post">
            <div class="div title">后端管理系统</div>
            <div class="div desc">Management System</div>
            <div class="intdiv">
                <input id="username" type="text" placeholder="请输入账号">
            </div>
            <div class="intdiv">
                <input id="password" type="password" placeholder="请输入密码">
            </div>
            <div class="drag-out">
                <span>滑动验证</span>
                <div class="drag-area"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i></div>
                <div class="drag-code"></div>
            </div>
            <!-- <div id='login'>
                <div onclick="login()">登录</div>
            </div> -->
            <button onclick="login()" type="button" block class="default">登录</button>
        </form>
        
    </div>
    <!-- <div id="landlord">
    <div class="message" style="opacity:0">你来啦~</div>
    <canvas id="live2d" width="580" height="580" class="live2d"></canvas>
    <div class="hide-button">隐藏</div>
</div> -->
    <!-- <div id="wzbg">
    <div id="one" class="absolute"></div>
    <div id="two" class="absolute"></div>
    <div id="three" class="absolute"></div>
    <div id="four" class="absolute"></div>
    <div id="five" class="absolute"></div>
</div> -->
</body>

<!--第一套背景画布js-->
<!-- <script type="text/javascript" src="/js/xk.js"></script> -->
<!--第二套背景画布js-->
<!-- <script type="text/javascript" src="/js/xk_2.js"></script> -->
<!--文字跟随鼠标js-->
<!-- <script type="text/javascript" src="/js/gswz.js"></script> -->
<!------------------------常规引用----------------------------------->
<script type="text/javascript" src="/js/jquery-2.1.1.min.js"></script>
<!--live2d,看板娘，必须要先引用jquery文件-->
<script type="text/javascript">
    // var message_Path = '/live2d/'
    // var home_Path = 'http://www.gfxy.com/'  //此处修改为你的域名，必须带斜杠
</script>
<script type="text/javascript" src="/live2d/js/live2d.js"></script>
<script type="text/javascript" src="/live2d/js/message.js"></script>
<script type="text/javascript">
    // loadlive2d("live2d", "/live2d/model/wrlt/vert_normal.model.json");
    // loadlive2d("live2d", "/live2d/model/vert_normal/vert_normal.model.json");
</script>
<script type="text/javascript">


    // 划动验证
    var validate = false;
    //1----------------------------------------------------
    //针对移动端的滑动验证
    var dragFun1 = function () {
        var maxWidth; //可拖动最大距离
        var move = false;//设置拖动区域是否可以拖动
        var leftArae;//拖动区域距左边的距离
        var dragOut = $(".drag-out");
        var dragArea = $(".drag-out .drag-area");
        var dragCode = $(".drag-out .drag-code");
        //鼠标按下事件
        dragArea.on('touchstart', function () {
            move = true;
            maxWidth = dragOut.width() - dragArea.width();//可以移动的最大距离
            leftArae = parseInt(dragOut.offset().left); //获取拖动区域距左边的距离
        })
        //鼠标拖动事件
        $(document).on('touchmove', function (e) {
            //获取滑块移动的距离
            movePx = e.originalEvent.changedTouches[0].pageX - leftArae;

            console.log(maxWidth, movePx)
            if (move == true) {
                if (movePx > 0 && movePx <= maxWidth) {
                    //如果滑块未拖动到最右边
                    dragArea.css("left", movePx);
                    dragCode.css("width", movePx);
                } else if (movePx > maxWidth) {
                    dragArea.css("left", maxWidth);
                    dragCode.css("width", maxWidth);
                    //如果滑块拖动到最右边
                    dragArea.unbind("mousedown");
                    $(document).unbind("mousemove");
                    $(document).unbind("mouseup");
                    dragOut.find("span").html("验证通过").css("color", "#fff");
                    dragOut.find("span").css("z-index", '99');
                    dragArea.html("");
                    dragArea.html("<i class=\"fa fa-check\" aria-hidden=\"true\"></i>");
                    // dragArea.css("background","url(images/ok.gif) no-repeat center");
                    validate = true;
                }
            }
        })
        //鼠标松开事件
        $(document).on('touchend', function () {
            if (move == true) {
                move = false;
                console.log(maxWidth, movePx)
                if (maxWidth > movePx) {
                    //如果滑块未拖动到最右边
                    dragArea.css("left", 0);
                    dragCode.css("width", 0);
                    validate = false;
                }
            }
        })
    }
    //2---------------------------------------------------------------------
    //针对PC端的点击滑动验证
    var dragFun2 = function () {
        var maxWidth; //可拖动最大距离
        var move = false;//设置拖动区域是否可以拖动
        var leftArae;//拖动区域距左边的距离
        var dragOut = $(".drag-out");
        var dragArea = $(".drag-out .drag-area");
        var dragCode = $(".drag-out .drag-code");
        //鼠标按下事件
        dragArea.mousedown(function () {
            move = true;
            maxWidth = dragOut.width() - dragArea.width();//可以移动的最大距离
            leftArae = parseInt(dragOut.offset().left); //获取拖动区域距左边的距离
        })
        //鼠标拖动事件
        $(document).mousemove(function (e) {
            //获取滑块移动的距离
            movePx = e.pageX - leftArae;
            if (move == true) {
                if (movePx > 0 && movePx <= maxWidth) {
                    //如果滑块未拖动到最右边
                    dragArea.css("left", movePx);
                    dragCode.css("width", movePx);
                } else if (movePx > maxWidth) {
                    dragArea.css("left", maxWidth);
                    dragCode.css("width", maxWidth);
                    //如果滑块拖动到最右边
                    dragArea.unbind("mousedown");
                    $(document).unbind("mousemove");
                    $(document).unbind("mouseup");
                    dragOut.find("span").html("验证通过").css("color", "#fff");
                    dragOut.find("span").css("z-index", '99');
                    dragArea.html("");
                    dragArea.html("<i class=\"fa fa-check\" aria-hidden=\"true\"></i>");
                    // dragArea.css("background","url(images/ok.gif) no-repeat center");
                    validate = true;
                }
            }
        })
        //鼠标松开事件
        $(document).mouseup(function () {
            if (move == true) {
                move = false;
                console.log(maxWidth, movePx)
                if (maxWidth > movePx) {
                    //如果滑块未拖动到最右边
                    dragArea.css("left", 0);
                    dragCode.css("width", 0);
                    validate = false;
                }
            }
        })
    };
    $(function () {
        dragFun1();//执行函数
        dragFun2();//执行函数
    });
    layui.use('layer', function () {
        // 弹窗
        var active = {
            offset: function (text = '操作成功') {
                layer.open({
                    type: 1
                    , offset: 'auto' //具体配置参考：
                    , id: 'layerDemoauto' //防止重复弹出
                    , content: '<div style="padding: 20px 100px; text-align: center">' + text + '</div>'
                    , btn: '关闭'
                    , btnAlign: 'c' //按钮居中
                    , shade: 0.3 //不显示遮罩
                    , yes: function () {
                        layer.closeAll();
                    }
                });
            }
        };
        if (url.error && url.title) {
            var title = url.title.replace(/%2F/g, '/');
            active['offset']("权限不足或登录超时，请重新登录，更新数据(" + title + ")");
        }
    });
    var lagoin_status = true;
    document.onkeydown = function (e) {
        // 回车提交表单
        // 兼容FF和IE和Opera
        var theEvent = window.event || e;
        var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
        if (code == 13) {
            if ($(".layui-layer-shade").css('display') == 'block') {
                $(".layui-layer-dialog").hide();
                $(".layui-layer-shade").hide();
            } else {
                if (lagoin_status) {
                    login();
                }
            }
        }
    }

    function login() {
        lagoin_status = false;
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        layui.use('layer', function () {
            var layer = layui.layer;
            layer.msg('验证中', {
                icon: 16,
                time: 0 //2秒关闭（如果不配置，默认是3秒）
            });
            if (username && password) {
                if (validate) {
                    $.ajax({
                        type: 'POST',
                        url: "{:url('user/admin_login')}",
                        data: {
                            username: username,
                            password: password
                        },
                        success: function (res) {
                            lagoin_status = true;
                            if (res.code == 200 && res.status == 'success') {
                                layer.closeAll();
                                $("#landlord").find(".message").html('居然被你蒙对了！对你印象有点改观啊.....');
                                layer.msg('登录成功', {
                                    icon: 1,
                                    time: 1500 //2秒关闭（如果不配置，默认是3秒）
                                }, function () {
                                    location.href = "{:url('index/index')}";
                                })
                            } else {
                                layer.closeAll();
                                layer.alert(res.message, { icon: 5 });
                            }
                        },
                        error: function (res) {
                            lagoin_status = true;
                            layer.closeAll();
                            layer.alert('接口异常', { icon: 5 });
                        }
                    })
                } else {
                    lagoin_status = true;
                    layer.closeAll();
                    layer.alert('请通过滑动验证', { icon: 5 });
                }
            } else {
                lagoin_status = true;
                layer.closeAll();
                layer.alert('账号或密码为空', { icon: 5 });
            }
        });
    }

    function GetRequest(urlStr) {
        if (typeof urlStr == "undefined") {
            var url = decodeURI(location.search); //获取url中"?"符后的字符串
        } else {
            var url = "?" + urlStr.split("?")[1];
        }
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            strs = str.split("&");
            for (var i = 0; i < strs.length; i++) {
                theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
            }
        }
        return theRequest;
    }
    var url = GetRequest();

    //判断当前页面是否在框架中
    if (top.location != self.location) {
        //在内框架中时跳转到最外层
        if (url.error) {
            var turl = "{:url('/admin/user/login',['error'=>'qx'])}" + '&title=' + url.title;
            top.location.href = turl;
        } else {
            top.location.href = "{:url('/admin/user/login')}";
        }
    }
</script>

</html>